<template>
  <div class="funcSettingCardContainer" @click="gotoFuncSetting">
    <div class="title">{{ $t("btnTitle.functionSetting") }}</div>
    <img class="arrow" :src="getFuncSettingImg" />
  </div>
</template>
<script>
export default {
  props: {
    darkModePro: {
      type: String,
      default: "light",
    },
  },
  data() {
    return {
      darkMode: "light",
    }
  },
  mounted() {
    this.darkMode = this.darkModePro;
  },
  watch: {
    darkModePro(newVal) {
      this.darkMode = newVal;
    },
  },
  computed: {
    getFuncSettingImg: function () {
      if (this.darkMode === "light") {
        return require("../../../assets/img/light/ic_function_setting_on.png");
      } else {
        return require("../../../assets/img/dark/ic_function_setting_on_dark.png");
      }
    },
  },
  methods: {
    gotoFuncSetting: function () {
      this.$router.push({
        path: "/setting",
        // query: {
        //   deviceName: this.deviceName, //传递设备名参数
        //   roomName: this.roomName, //传递房间名参数
        // },
      });
    },
  },
}
</script>
<style scope>
.funcSettingCardContainer {
  height: 64px;
  width: 100%;
  border-radius: 16px;
  background-color: var(--current-card-background-color);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.funcSettingCardContainer .title {
  font-size: 16px;
  margin-left: 16px;
  color: var(--current-primary-color);
}

.funcSettingCardContainer .arrow {
  width: 24px;
  height: 24px;
  margin-right: 16px;
}
</style>
